import { PIXIComponents } from "@/utils/PIXIComponents";
import ParameterMethod from "@/utils/ParameterMethod";
import * as PIXI from "pixi.js"; // https://www.npmjs.com/package/pixi.js
import { positionMap } from "@/utils/utils";
import store from "@/store";
class Regist extends PIXIComponents {
  // public regist() {
  //   PIXIComponents.setComponents("import", this.handle.bind(this));
  // }
  public async handle() {
    let i = 0;
    console.log(this.importres());
    const loader = new PIXI.Loader();
    const { Resourece, getSprites, ResoureceObj, modules } = this.importres();
    loader.add(Resourece);
    loader.onProgress.add(() => {});
    loader.onError.add((err: any) => {
      console.log(`${++i}` + err);
    });
    loader.onLoad.add(() => {});
    loader.onComplete.add(() => {});
    return new Promise((resolve: any, reject) => {
      loader.load(async (loader: any, resources: any) => {
        await PIXI.utils.clearTextureCache(); // 加载后清除缓存
        await this.start(loader, resources, getSprites, ResoureceObj, modules);
        resolve();
      });
    });
  }
  // 加载素材完毕
  private async start(
    loader: any,
    resources: any,
    getSprites: any,
    ResoureceObj: any,
    modules: any
  ) {
    console.log(resources);
    this.CreateSpriteGroup(resources, getSprites, ResoureceObj, modules);
  }
  // 创建 图片精灵组并加入到场景
  private CreateSpriteGroup(
    resources: any,
    getSprites: any,
    ResoureceObj: any,
    modules: any
  ) {
    console.log(modules);
    const Containerarr: any = new Object();
    // 总场景
    Containerarr.Generalscenario = new PIXI.Container();
    // 位置
    Containerarr.Generalscenario.position.set(0, 0);
    Containerarr.Generalscenario.name = "Generalscenario";
    // ************************* 此处可以封装成一个函数
    if (modules.bg) {
      Containerarr.bg = new PIXI.Container();
      Containerarr.bg.position.set(
        modules.bg.position.x,
        modules.bg.position.y
      );
      Containerarr.bg.name = "bg";
      ParameterMethod.stage.addChild(Containerarr.bg);
      modules.bg.Resourece.forEach((value: any) => {
        // 精灵对应 素材集合
        console.log("===>精灵", value);
        const options = getSprites[value.name];
        const sprite = new PIXI.Sprite(resources[value.name].texture);
        // 设置属性
        if (options) {
          this.setSize(sprite, options.size); // 设置尺寸
          this.setAnchor(sprite, options.anchor); // 设置锚点
          this.setPosition(sprite, options.position); // 设置位置
        }
        sprite.name = value.name;
        // 加入场景
        modules.bg.isRendering && Containerarr.bg.addChild(sprite);
      });
    }
    // *************************
    ParameterMethod.stage.addChild(Containerarr.Generalscenario);
    // 设置子场景 已经精灵
    Object.keys(modules).forEach((sceneKey: string) => {
      console.log(sceneKey);
      if (/(^p)/.test(sceneKey)) {
        console.log("场景和背景");
        // 场景容器
        Containerarr[sceneKey] = new PIXI.Container();
        // Containerarr.
        Containerarr[sceneKey].position.set(
          modules[sceneKey].position.x,
          modules[sceneKey].position.y
        );
        Containerarr[sceneKey].name = sceneKey;
        Containerarr.Generalscenario.addChild(Containerarr[sceneKey]);
        console.log("容器===>", modules[sceneKey]);
        // 创建精灵
        modules[sceneKey].Resourece.forEach((value: any) => {
          // 精灵对应 素材集合
          const options = getSprites[value.name];
          const sprite = new PIXI.Sprite(resources[value.name].texture);
          // 设置属性
          if (options) {
            this.setSize(sprite, options.size); // 设置尺寸
            this.setAnchor(sprite, options.anchor); // 设置锚点
            this.setPosition(sprite, options.position); // 设置位置
          }
          sprite.name = value.name;
          sprite.alpha = options.alpha || 1;
          // 加入场景
          modules[sceneKey].isRendering &&
            Containerarr[sceneKey].addChild(sprite);
        });
      } else {
        if (!/(^bg)/.test(sceneKey)) {
          modules[sceneKey].Resourece.forEach((value: any) => {
            // 精灵对应 素材集合
            console.log(getSprites)
            console.log(value)
            const options = getSprites[value.name];
            const sprite = new PIXI.Sprite(resources[value.name].texture);
            // 设置属性
            if (options) {
              this.setSize(sprite, options.size); // 设置尺寸
              this.setAnchor(sprite, options.anchor); // 设置锚点
              this.setPosition(sprite, options.position); // 设置位置
            }
            sprite.name = value.name;
            console.log(options)
            sprite.alpha = options.alpha
            store.commit("setsprite", { key: value.name, sprite });
          });
        }
      }
    });
    return;
    Object.keys(ResoureceObj).forEach((key) => {
      // 精灵对应 素材集合
      const options = getSprites[key];
      // console.log(options);
      // console.log(resources);
      const sprite = new PIXI.Sprite(resources[key].texture);
      // 设置属性
      if (options) {
        this.setSize(sprite, options.size); // 设置尺寸
        this.setAnchor(sprite, options.anchor); // 设置锚点
        this.setPosition(sprite, options.position); // 设置位置
      }
      // this.setSize(sprite, { width: 0.5 }); // 设置尺寸
      // this.setAnchor(sprite, 'center'); // 设置锚点
      // this.setPosition(sprite, "center"); // 设置位置
      // 加入场景
      ParameterMethod.stage.addChild(sprite);
      // sprites[key] = sprite;
      // resources[key] = resources;
    });
  }
  /**
   *
   * @param obj
   * @param size
   * @param anchor
   * @param position
   */
  private setSize(obj: any, size: any) {
    if (size.mode === "widthFit") {
      // 按宽度适应
      const scale = (ParameterMethod.APP.screen.width * size.width) / obj.width;
      obj.scale.x = scale;
      obj.scale.y = scale;
    } else if (size.mode === "heightFit") {
      // 按高度适应
      const scale =
        (ParameterMethod.APP.screen.height * size.height) / obj.height;
      obj.scale.x = scale;
      obj.scale.y = scale;
    } else {
      // 自定义
      obj.width = size.width;
      obj.height = size.height;
    }
  }
  // 设置锚点
  setAnchor(obj: any, anchor: any) {
    if (typeof anchor === "string") {
      const anchorMap = positionMap(anchor);
      obj.anchor.x = anchorMap.x;
      obj.anchor.y = anchorMap.y;
    } else {
      obj.anchor.x = anchor.x;
      obj.anchor.y = anchor.y;
    }
  }
  private setPosition(obj: any, position: any) {
    if (typeof position === "string") {
      position = positionMap(position);
    }
    obj.position.x = position.x * ParameterMethod.APP.screen.width;
    obj.position.y = position.y * ParameterMethod.APP.screen.height;
  }
  // 引入素材
  private importres() {
    const Resourece: object[] = new Array();
    const getSprites: object | any = new Object();
    const ResoureceObj: object | any = new Object();
    const modulesFiles = require.context("../resourceList", true, /\.ts$/);
    const modules = modulesFiles
      .keys()
      .reduce((modules: any, modulePath: any) => {
        const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
        const value = modulesFiles(modulePath);
        modules[moduleName] = value.default;
        return modules;
      }, {});
    Object.keys(modules).forEach((key) => {
      const i = modules[key];
      i.Resourece.forEach((i: any) => {
        Resourece.push(i);
        ResoureceObj[i.name] = i;
      });
      Object.keys(i.getSprites).forEach((getSpriteskey: any) => {
        getSprites[getSpriteskey] = i.getSprites[getSpriteskey];
      });
    });
    return { modules, Resourece, getSprites, ResoureceObj };
  }
}
export default new Regist();
